extends ../../components/layout
append style
  +css(['demo/demo.css','lib/swiper.min.css'],true)
block title
  title Swiper
  style.
    body {
      height: auto;
    }
    .swiper-container {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    .gallery-thumbs,.gallery-top {
      height: 300px;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      width: 100%;
    }
    .gallery-thumbs {
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
    }

block content
  header.demos-header
    h1.demos-title Swiper
  section
    +swiper(class="gzl-swiper")
    +swiper(class="gzl-swiper_fraction")
    +swiper(class="gzl-swiper_custom")
    .swiper-container.gallery-thumbs
      .swiper-wrapper
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature1.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature2.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature3.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature4.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature5.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature6.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature7.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature8.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature9.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature10.jpg)")
    .swiper-container.gallery-top
      .swiper-wrapper
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature1.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature2.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature3.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature4.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature5.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature6.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature7.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature8.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature9.jpg)")
        .swiper-slide(style="background-image:url(https://www.swiper.com.cn/demo/img/nature10.jpg)")
      .swiper-button-next.swiper-button-white
      .swiper-button-prev.swiper-button-white
append script
  script.
    require(['swiper'], function (Swiper) {
      var test1 = new Swiper('.gzl-swiper', {
        loop: true,
        autoplay: {
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        }
      });
      var test2 = new Swiper('.gzl-swiper_fraction', {
        loop: true,
        autoplay: {
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      });
      var test3 = new Swiper('.gzl-swiper_custom', {
        loop: true,
        autoplay: {
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      });
      var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 5,
        freeMode: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true
      });
      var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        thumbs: {
          swiper: galleryThumbs
        }
      });
    })